<template>
  <el-tooltip
    :disabled="disabled"
  >
    <div
      ref="$toolTip"
      class="tooltip-main"
    >
      <span>
        <slot />
      </span>
    </div>
  </el-tooltip>
</template>
<script>
/**
 * --------------- 说明 ---------------
 * 该组件是为了让内部文字长度超出隐藏时再显示tooltip
 * 比较div和内部slot替换后的span的宽度 判断文字是否溢出
 */
export default {
  name: 'ToolTip',
  inheritAttrs: false,
  data() {
    return {
      disabled: true
    }
  },
  mounted() {},
  methods: {
    mouseover() {
      const dom = this.$refs.$toolTip
      const core = dom.children[0]
      // 等号是为了防止加了省略号后元素宽度和不加省略号的元素宽度一致，导致不显示tooltip
      if (dom.offsetWidth <= core.offsetWidth) {
        // 说明文字溢出了 显示tooltip
        this.disabled = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.tooltip-main {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
